<template>
  <div>
    <div class="system-user-search">
      <el-input v-model="state.tableData.param.search" clearable size="default" placeholder="请输入角色名称" style="max-width: 180px" > </el-input>
      <el-button size="default" type="primary" class="ml10" @click="getUser">
        <el-icon>
          <IEpSearch />
        </el-icon>
        查询
      </el-button>
      <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
        <el-icon>
          <IEpFolderAdd />
        </el-icon>
        新增用户
      </el-button>
    </div>

    <el-table :data="state.tableData.data" lazy style="width: 100%" >
      <el-table-column fixed prop="id" label="ID" show-overflow-tooltip/>
      <el-table-column prop="username" label="Username" show-overflow-tooltip/>
      <el-table-column prop="mobile" label="Mobile" show-overflow-tooltip/>
      <el-table-column prop="roles" label="Roles" show-overflow-tooltip>
        <template #default="scope">
          <el-tag
              :type="role === 'admin' ? 'danger' : ''"
              disable-transitions
              v-for="role in scope.row.roles"
          >
            {{ role }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="Operations">
        <template #default="scope">
          <el-button size="small" @click="onOpenAddRole('edit', scope.row)"
          >Edit</el-button
          >
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              v-if="scope.row.id !== store.getters.id"
          >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-block">
      <el-pagination
          v-model:current-page="state.tableData.param.pageNum"
          v-model:page-size="state.tableData.param.pageSize"
          :page-sizes="[10, 15, 20, 40]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <RoleDialog ref="roleDialogRef" @refresh="getTableData" :roles="roles"/>
  </div>
</template>

<script lang="ts" setup>
import { getUserList, getRoleList } from "@/api/epgms/manage/index.ts"
import RoleDialog from "./dialog.vue"
import { ref, reactive, onMounted } from 'vue'
import {register} from "@/api/epgms/account/register"
import {updateUserAdmin, deleteUser} from "@/api/epgms/manage/index"
import {ElMessage} from "element-plus";
import store from "@/store";


const roleDialogRef = ref();
const roles = ref([]);

const getUser = () => {
  state.tableData.loading = true
  getUserList(state.tableData.param).then(res => {
    state.tableData.data = res.data.user_list
    state.tableData.total = res.data.count
    state.tableData.loading = false
  })
}

const getRole = () => {
  getRoleList(state.tableData.param).then(res => {
    console.log(res.data)
    roles.value.push(...res.data.roles_list)
  })
}

onMounted(() => {
  getUser()
  getRole()
})


const state = reactive({
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      search: '',
      pageNum: 1,
      pageSize: 10,
    },
  },
});

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const search = ref("")

const handleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val
  getUser()
}
const handleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val
  getUser()
}

const onOpenAddRole = (type: string, payload: any = {}) => {
  roleDialogRef.value.openDialog(type, payload);
};

// 初始化表格数据
const getTableData = async (payload, method) => {
  state.tableData.loading = true;
  if (method === "修改"){
    updateUserAdmin(payload).then(res => {
      if (res.error_code == 200){
        getUser()
      }else{
        ElMessage.error(res.msg)
      }
      roleDialogRef.value.clearForm()
    })
  }else if(method === "新增"){
    register(payload).then(res => {
      getUser()
      roleDialogRef.value.clearForm()
    })
  }
  // console.log(res)
  setTimeout(() => {
    state.tableData.loading = false;
  }, 500);
};

const handleEdit = (index: number, row: any) => {
  console.log(index, row)
}
const handleDelete = async (index: number, row: any) => {
  deleteUser(row.id).then(res => {
    if (res.msg){
      ElMessage.success(res.msg)
      getUser()
    }
  })

}
</script>

<style lang="less" scoped>
.pagination-block{
  margin-top: 10px;
  height: 30px;
  margin-bottom: 5px;
}
.el-button--primary{
  margin-left: 12px;
}
.el-tag{
  margin: 5px;
}
.system-user-search{
  height: 100px;
}
.el-table--fit{
  flex: 1;
  overflow: auto;
}
</style>
